<!--
 * @Description: 
 * @Author: Zlou
 * @Date: 2021-06-22 14:47:04
 * @LastEditors: Zlou
 * @LastEditTime: 2021-06-28 09:24:48
-->
<template>
<div class="CustomerAccount-list">
    <div class="search">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <!-- 日期时间选择器 -->
        <el-form-item>
          <el-date-picker
          v-model="searchForm.Time" 
          value-format="timestamp"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="mini">
          </el-date-picker> 
        </el-form-item>
        <!-- 交易类型： 充值/消费 -->
        <el-form-item>
          <el-select size="mini" clearable v-model="searchForm.type" placeholder="交易类型">
            <el-option label="充值" value="充值"></el-option>
            <el-option label="消费" value="消费"></el-option>
          </el-select>
        </el-form-item>
        <!-- 交易状态：正常/未审核 -->
        <el-form-item>
          <el-select size="mini" clearable v-model="searchForm.status" placeholder="交易状态">
            <el-option label="正常" value="正常"></el-option>
            <el-option label="未审核" value="未审核"></el-option>
          </el-select>
        </el-form-item>
        <!-- 顾客编号 -->
        <el-form-item>
          <el-select size="mini" clearable v-model="searchForm.userId" placeholder="顾客编号">
            <el-option v-for="item in categoryData" :key="item.id" :label="item.userId" :value="item.userId"></el-option>
          </el-select>
        </el-form-item>
        <!-- 查询按钮 -->
        <el-form-item>
          <el-button size="mini" type="primary" @click="toSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div>
      <el-table size="mini" v-loading="loading" :data="tableData" stripe style="width: 100%">
        <el-table-column prop="userId" align="center" label="顾客编号"></el-table-column>
        <el-table-column prop="transferMoney"  align="center" label="交易金额"> </el-table-column>
        <el-table-column prop="transferTime"  align="center" label="交易时间"> 
          <template slot-scope="scope">
            {{moment(scope.row.transferTime).format("YYYY-MM-DD HH:mm:ss")}}
          </template>
        </el-table-column>
        <el-table-column prop="type"  align="center" label="交易类型"> </el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status==='正常'?'success':'danger'">{{scope.row.status}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="description" align="center" label="描述"></el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pagination-div" >
      <el-pagination @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.page"
          :page-sizes="[2, 5, 10, 15, 20, 30]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
</div>
</template>

<script>
import { pageQueryCustomerAccount } from '@/api/account';
import moment from 'moment';
export default {
    data() {
        return {
          // 日期选择器
          pickerOptions: {
            shortcuts: [{
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              }
            }]
          },
          // 顾客编号的数据
          categoryData: [],
          // 交易类型，交易状态的数据
          searchForm: {
            type: '' ,
            status: '' ,
            userId: '',
          },
          // 表格展示的数据
          tableData: [],
          // 分页参数
          params: {
            page: 1,
            pageSize: 10,
          },
          // 分页总条数
          total: 0,
          // 加载
          loading: false,
          };
    },
    // 分页深度监听
    watch: {
      params: {
        handler(){
          this.queryData();
        },
        deep: true,
      }
    },
    computed: {},
    methods: {
      moment,
      async queryCategoryData(){
        let res = await pageQueryCustomerAccount({page: 1, pageSize: 100});
        //   获取顾客编号的数据
        this.categoryData = res.data.list;
      },
      // 获取顾客表单的数据
      async queryData(){
        this.loading = true ;
        // 处理数据
        let temp = {
          ...this.params,
          ...this.searchForm,
        }
        // 遍历对象
        for (let key in temp){
          if(!temp[key]){
            delete temp[key];
           }
        }
        if(temp.Time) {
          temp.beginTime = temp.Time[0];
          temp.endTime = temp.Time[1];
          delete temp.Time;
        }
        console.log(temp);
        // 发送请求
        let res = await pageQueryCustomerAccount(temp);
        this.tableData = res.data.list;
        this.total = res.data.total;
        // 加载完毕
        this.loading = false;
      },
      // 查询按钮点击事件处理程序
      toSearch() {
        this.queryData();
      },
      // 每页显示的条数发生变化时的事件处理程序
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.params = {
          page: 1,
          pageSize: val,
        };
      },
      // 当前页码发生变化时的时的事件处理程序
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.params.page = val ;
      },
    },
    created() {
        this.queryCategoryData();
        this.queryData();
    },
    mounted() {}
};
</script>
<style lang="scss" scoped>
.search{
    display: flex;
    height: 50px;
}

</style>